<template>
  <div>
    <el-card class="present-card">
      <div style="height: 60px;display: flex;">
          <h3 style="line-height: 10px; ">黑名单</h3>
      </div>
        <el-table
        :data="permissionPage"
        border
        style="width: 100%; line-height: 40px;">
        <el-table-column
          prop="packageName"
          label="包名"
          width="450">
        </el-table-column>
        <el-table-column
          prop="apkName"
          label="文件名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="md5"
          label="MD5">
        </el-table-column>
        <el-table-column
          prop="result"
          label="判别类型">
        </el-table-column>
      </el-table>

      <el-row>
        <el-col :span="24" style="text-align: right;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </el-col>
      </el-row>
      
      </el-card>
      <br>
  </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        permissionData: [],  //某个列表的信息
        baseURL: "http://localhost:8000/",
        total: 10, //数据的总行数
        currentpage: 1, //当前所在的页数
        pagesize: 10,  //每页显示多少行
        ID:[],
        permissionPage:[],
      }
    },
  
    mounted() {
      // this.savedata();
      this.getMessages();
    },
  
    methods: {
      savedata() {
        var item = localStorage.getItem("data");
        var parse = JSON.parse(item);
        this.ID = parse["files_id"];
      },
      getMessages:function(){
        //记录this的地址
        let that = this
        //使用Axios实现Ajax请求
        that.axios.get(that.baseURL+"apk/black_apk/")
        .then(function(res){
          //请求成功后执行的函数
          that.permissionData = res.data;
          //获取返回记录的总行数
          that.total = res.data.length;
          //获取当前页的数据
          that.getPage();

        })
        .catch(function(err){
          //请求失败后执行的函数
          console.log(err)
        })
      },
      //获取当前页的数据
      getPage() {
        //清空permissionPage中的数据
        this.permissionPage = [];
        //获取当前页的数据
        for(let i=(this.currentpage - 1)* this.pagesize; i< this.total; i++){
          //遍历数据添加到permissionPage中
          this.permissionPage.push(this.permissionData[i]);
          //判断是否达到一页的要求
          if (this.permissionPage.length === this.pagesize) break;
        }
      },
      //分页时修改每页的行数
      handleSizeChange(size) {
        //修改当前每页数据行数
        this.pagesize = size;
        //数据重新分页
        this.getPage();
      },
      handleCurrentChange(pageNumber) {
        //修改当前的页码
        this.currentpage = pageNumber;
        //数据重新分页
        this.getPage();
      },
    }
  
  }
  </script>
  
  <style>
  
  </style>
